<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

<!--  <form method="GET" action="">-->
<!--    <div>GET </div>-->
<!--    <p>Name: <input type="text" name="name"></p>-->
<!--    <p>Message:<br><textarea name="message"></textarea></p>-->
<!--    &lt;!&ndash; <p><button type="submit">Send via GET </button></p> &ndash;&gt;-->
<!--    <p><button onclick="fetchByGet()">Send via GET </button></p>-->
<!--  </form>-->
<!--  <hr>-->
<!--  <form method="POST" action="">-->
<!--    <div>POST </div>-->
<!--    <p>Name: <input type="text" name="name"></p>-->
<!--    <p>Message:<br><textarea name="message"></textarea></p>-->
<!--    &lt;!&ndash; <p><button type="submit">Send via POST</button></p> &ndash;&gt;-->
<!--    <p><button onclick="fetchByPost()">Send via POST</button></p>-->
<!--  </form>-->


  <div>GET </div>
  <p>Name: <input type="text" name="name"></p>
  <p>Message:<br><textarea name="message"></textarea></p>
  <!-- <p><button type="submit">Send via GET </button></p> -->
  <p><button onclick="fetchByGet()">Send via GET </button></p>

  <div>POST </div>
  <p>Name: <input type="text" name="name"></p>
  <p>Message:<br><textarea name="message"></textarea></p>
  <!-- <p><button type="submit">Send via POST</button></p> -->
  <p><button onclick="fetchByPost()">Send via POST</button></p>


  <script>

   let nameDom= document.getElementsByName("name")[0]
   let messageDom= document.getElementsByName("message")[0]
   let nameDomPost= document.getElementsByName("name")[1]
   let messageDomPost= document.getElementsByName("message")[1]
  //  console.log("nameDom");
  //  console.log(nameDom);
  //   let name=document.getElementsByName("name")[0].innerText
  //   let msg=document.getElementsByName("message")[0].innerText
    // let api = "http://localhost:8080"
    // 没有action的 form 就行
    let api = "http://localhost:8889"
    let fetchByGet = function () {
      console.log("fetchByGet");
      // let url=`${api}/12.form.html?name=` + name + "&message=" + msg
      // let url=`${api}/msg/list`
      let url=`${api}/msg/getAll`
      fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },

      }).then(function (res) {
          // fetch  js
          // https://www.jianshu.com/p/e18ced22cfaa
        console.log(res);
          // console.log(res.json());
          // https://www.jianshu.com/p/e18ced22cfaa
          res.json().then(result=>{
              console.log(result)
          })
          // res.json().then(result=>{
          //     console.log(result)
          // })
      }, function (e) {
        console.log(e);
      });
    }


    let fetchByPost = function () {
      console.log("fetchByPost");
      let url=`${api}/msg/save`
      // https://blog.csdn.net/aa3115386/article/details/79616794
      // "Content-Type": "application/x-www-form-urlencoded",
        console.log("nameDomPost")
        console.log(nameDomPost)
    // let  name = nameDomPost.innerText
    // let  msg = messageDomPost.innerText
        let  name = nameDomPost.value
        let  msg = messageDomPost.value
        // innerText 没有值
        // console.log("nameDomPost.value");
        // console.log(nameDomPost.value);
        let   formData=JSON.stringify({
            name:name,
            message:msg
        })
        console.log("formData")
        console.log(formData)
      console.log("url");
      console.log(url);

      fetch(url, {
        method: "POST",
        headers: {

          "Content-Type": "application/json",
        },
        // Content-Type json
      //  不stringify 不行
      // 改了有动静 不用重启 http server
        body: formData

      }).then(function (res) {
        console.log(res);
      }, function (e) {
        console.log(e);
      });
    }

  </script>
</body>

</html>
